<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<html>
<head>
    <title>Title</title>
    <script src="${ctx}/js/jquery-1.8.2.min.js"></script>
    <script src="${ctx}/js/fileupload.js"></script>
    <link href="<%=request.getContextPath()%>/css/img.css" rel="stylesheet">
</head>
<body>
<script>
    $(function(){
        $.ajax({
                 type: "post",
                 url: "citylist.do",
                 data: {"pid":0},
                 success: function (res) {
                     for (let x in res) {
                         if(res[x].id=="${map.shengid}"){
                             $("[name='shengid']").append("<option value="+res[x].id+" selected>"+res[x].cname+"</option>")
                             $("[name='shengid']").trigger("change");
                         }else{
                             $("[name='shengid']").append("<option value="+res[x].id+">"+res[x].cname+"</option>")
                         }
                     }
                 }
             })
        $("[name='shengid']").change(function(){
            let pid = $(this).val();
            $("[name='shiid']").empty();
            $("[name='shiid']").append("<option value=''>请选择</option>")
            $("[name='xianid']").empty();
            $("[name='xianid']").append("<option value=''>请选择</option>")
            $.ajax({
                type: "post",
                url: "citylist.do",
                data: {"pid":pid},
                success: function (res) {
                    for (let x in res) {
                        if(res[x].id=="${map.shiid}"){
                            $("[name='shiid']").append("<option value="+res[x].id+" selected>"+res[x].cname+"</option>")
                            $("[name='shiid']").trigger("change");
                        }else{
                            $("[name='shiid']").append("<option value="+res[x].id+">"+res[x].cname+"</option>")
                        }
                    }
                }
            })
        })
        $("[name='shiid']").change(function(){
            let pid = $(this).val();
            $("[name='xianid']").empty();
            $("[name='xianid']").append("<option value=''>请选择</option>")
            $.ajax({
                type: "post",
                url: "citylist.do",
                data: {"pid":pid},
                success: function (res) {
                    for (let x in res) {
                        if(res[x].id=="${map.xianid}"){
                            $("[name='xianid']").append("<option value="+res[x].id+" selected>"+res[x].cname+"</option>")
                            $("[name='xianid']").trigger("change");
                        }else{
                            $("[name='xianid']").append("<option value="+res[x].id+">"+res[x].cname+"</option>")
                        }
                    }
                }
            })
        })
    })
</script>
<form action="list.do" method="post">
    <input type="hidden" name="cpage">
    用户名:<input type="text" name="mohu" value="${map.mohu}">
    日期:<input type="text" name="startTime" value="${map.startTime}">---
        <input type="text" name="endTime" value="${map.endTime}">
    省:
    <select name="shengid">
        <option value="">请选择</option>
    </select>
    市:
    <select name="shiid">
        <option value="">请选择</option>
    </select>
    县:
    <select name="xianid">
        <option value="">请选择</option>
    </select>
    <input type="submit" value="查询">
</form>
<table border="10">
    <tr>
        <td>编号</td>
        <td>用户名</td>
        <td>用户密码</td>
        <td>性别</td>
        <td>爱好</td>
        <td>日期</td>
        <td>图片</td>
        <td>省</td>
        <td>市</td>
        <td>县</td>
    </tr>
    <c:forEach items="${pageInfo.list}" var="s">
        <tr>
            <td>${s.id}</td>
            <td>${s.name}</td>
            <td>${s.password}</td>
            <td>${s.sex}</td>
            <td>${s.hobby}</td>
            <td>${s.bdate}</td>
            <td><img alt="无法展示" src="${s.pic}" width="100px"></td>
            <td>${s.shengname}</td>
            <td>${s.shiname}</td>
            <td>${s.xianname}</td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="11">
            <input type="button" value="首页" onclick="fenye(1)">
            <input type="button" value="上一页" onclick="fenye(${pageInfo.prePage})">
            <input type="button" value="下一页" onclick="fenye(${pageInfo.nextPage})">
            <input type="button" value="尾页" onclick="fenye(${pageInfo.pages})">
        </td>
    </tr>
</table>
<script>
    function fenye(cpage){
        $("[name='cpage']").val(cpage);
        $("form").submit();
    }
</script>
</body>
</html>